<template>
	<a-watermark class="watermark" content="趣貓坞" grayscale>
		<a-page-header @back="back" :style="{ background: 'var(--color-bg-2)' }" title="参与任务" />
		<a-alert>为了落地方案奖项，请务必填写真实信息。</a-alert>
		<view :style="{ padding: '20px' }">
			<a-form size="large" scroll-to-first-error :rules="rules" layout="vertical" :model="form" @submit="sub">
				<a-form-item field="name" label="您的姓名" required validate-trigger="blur" asterisk-position="end">
					<a-input v-model="form.name" placeholder="请输入您的姓名" allow-clear />
				</a-form-item>
				<a-form-item field="phone" label="手机号码" required validate-trigger="blur" asterisk-position="end">
					<a-input-number placeholder="请输入您的手机号" v-model="form.phone" :max-length="11" allow-clear
						hide-button>
						<template #prepend>
							+86
						</template>
					</a-input-number>
				</a-form-item>
				<a-form-item field="tag" label="您的身份" required validate-trigger="blur" asterisk-position="end">
					<a-select v-model="form.tag" placeholder="请选择您的身份" allow-clear>
						<a-option>学生</a-option>
						<a-option>工作人员</a-option>
					</a-select>
				</a-form-item>
				<a-form-item field="infoImages" required help="最多可上传6张图片" label="方案图片" asterisk-position="end">
					<a-upload list-type="picture-card" :limit="6" accept="image/*" :show-remove-button="false"
						action="https://admin.yaojunzhiku.com/prod-api/common/uploadOSS"
						:default-file-list="form.infoImageList" image-preview @success="imageUploadSuc" />
				</a-form-item>
				<a-form-item field="video" label="方案视频" help="视频大小限制在200M以内">
					<a-upload action="https://admin.yaojunzhiku.com/prod-api/common/uploadOSS" @success="videoUploadSuc"
						accept="video/*" :show-remove-button="false">
						<template #upload-button>
							<view style="
							    background-color: var(--color-fill-2);
								color: var(--color-text-1);
								border: 1px dashed var(--color-fill-4);
								height: 40px;
							    width: 200px;
							    line-height: 40px;
							    text-align: center;">
								<view style="color: #3370FF">
									<icon-live-broadcast :size="18" style="margin-right: 8px;" />点击上传方案视频
								</view>
							</view>
						</template>
					</a-upload>
				</a-form-item>
				<a-form-item>
					<a-button type="primary" :loading="loading" :style="{ height: '44px',fontSize: '16px' }" long
						html-type="submit">提交方案</a-button>
				</a-form-item>
			</a-form>
		</view>

	</a-watermark>
</template>

<script setup>
	import TaskApi from '@/Api.js'
	import {
		ref
	} from 'vue';
	import {
		Message,
		Modal
	} from '@arco-design/web-vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	const loading = ref(false);
	const form = ref({
		uuid: uni.getStorageSync('UUID'),
		taskId: '',
		name: '',
		phone: '',
		tag: '',
		infoImageList: [],
		infoImages: '',
		video: '',
	});

	const rules = {
		name: [{
			required: true,
			message: '请输入您的姓名',
		}],
		phone: [{
			message: '请输入您的手机号',
			required: true,
		}],
		tag: [{
			message: '请选择您的身份',
			required: true,
		}],
		infoImages: [{
			message: '请上传方案图片',
			required: true,
		}],
	}

	onLoad((option) => {
		form.value.taskId = option.id || 0;
	});

	const imageUploadSuc = (e) => {
		const url = e.response.url || '';
		if (!url) {
			Message.error('图片上传接口出错');
			return;
		}
		form.value.infoImageList.push({
			uid: e.uid,
			name: e.name,
			url: url,
		});
		form.value.infoImages = form.value.infoImageList.map(item => item.url).join(',');
	}

	const videoUploadSuc = (e) => {
		const url = e.response.url || '';
		if (!url) {
			Message.error('视频上传接口出错');
			return;
		}
		form.value.video = url;
	}


	const back = () => {
		history.back()
	}

	const sub = ({
		errors
	}) => {
		if (errors) {
			return
		}
		loading.value = true;
		TaskApi.PostTask(form.value).then(resp => {
			if (resp.code != 200) {
				Message.error(resp.msg);
				loading.value = false;
				return;
			}
			Modal.success({
				title: '方案提交成功',
				content: '您的方案已入库，我们将在海选结束后进行筛选，届时请注意我们的来电',
				width: '68%',
				maskClosable: false,
				okText: '好的，我知道了',
				onOk: () => {
					loading.value = false;
					uni.reLaunch({
						url: '/pages/Task?active=1',
					})
				},
			});
		})

	}
</script>

<style scoped lang="scss">
	.watermark {
		background: var(--color-bg-2);
	}
</style>